import { Component, OnInit, HostListener } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";
import { Http} from '@angular/http';

import * as echarts from 'echarts';


@Component({
  selector: 'chart-map',
  template: `<div id="map" style="width:100%;height:600px; margin: 0 auto"></div>`
})
export class MapComponent implements OnInit {

  myMap:any;
  option:any;
  
  constructor(private http:Http,
              private httpRequest:HttpRequest) { }

  @HostListener('window:resize')
  listenner() {
    this.myMap.resize();
  }

  ngOnInit() {
    this.myMap = echarts.init(document.getElementById('map'));
    this.paintMap();
  }

  //获取地图数据
  paintMap(){
    let ti_cn = '监控中心';
    let lda_cn = ['设备台数','在线数量','故障数量','维保数量'];
   
    let sm1_cn = '设备台数';
    let sm2_cn = '在线数量';
    let sm3_cn = '故障数量';
    let sm4_cn = '维保数量';
   
    let mdata = [], ndata = [], ldata = [],kdata = [];
    this.httpRequest.sendGet('stat/province_device/count').subscribe(res => {
      mdata = res;
      this.httpRequest.sendGet('stat/province_device/online').subscribe(res => {
        ndata = res;
        this.httpRequest.sendGet('stat/province_device/guzhang').subscribe(res => {
          ldata = res;
          this.httpRequest.sendGet('stat/province_device/weibao').subscribe(res => {
            kdata = res;          
              this.map(ti_cn,lda_cn,sm1_cn,mdata,sm2_cn,ndata,sm3_cn,ldata,sm4_cn,kdata);            
          },err => console.log(err));
        },err => console.log(err));
      },err => console.log(err));
    },err => console.log(err));

  }

  map(ti,lda,sm1,data1,sm2,data2,sm3,data3,sm4,data4){
    this.http.get('assets/js/echarts/china.json').subscribe(chinaJson => {
      echarts.registerMap('china', chinaJson.json());     

      this.option = {
        title : {
          text: ti,
          x:'center'
        },
        backgroundColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
            offset: 0, color: '#ffffff' // 0% 处的颜色
          }, {
            offset: 1, color: 'rgb(100,171,230)' // 100% 处的颜色
          }],
          globalCoord: false // 缺省为 false
        },
        tooltip : {
          trigger: 'item',
          formatter:params => {
            var res = params['name'] + '<br/>';
            var myseries = this.option.series;
            for(var i=0;i<myseries.length;i++){
              res+=myseries[i].name;
              for(var j=0;j<myseries[i].data.length;j++){
                if(myseries[i].data[j].name==params['name']){
                  res+=':'+myseries[i].data[j].value+'<br/>';
                }
              }
            }
            return res;
          }
        },
        legend: {
          orient: 'vertical',
          x:'left',
          data:lda,

        },
        visualMap: {         
         // text:dt,
          calculable : true,
          color: ['rgb(0,110,220)','rgb(224,255,255)']
        },
        series : [
          {
            name: sm1,
            type: 'map',
            mapType: 'china',
            roam: true,
            itemStyle:{
              normal:{label:{show:true}},
              emphasis:{label:{show:true}}
            },
            data:data1
          },
          {
            name: sm2,
            type: 'map',
            mapType: 'china',
            roam: true,
            itemStyle:{
              normal:{label:{show:true}},
              emphasis:{label:{show:true}}
            },
            data:data2
          },
          {
            name: sm3,
            type: 'map',
            mapType: 'china',
            roam: true,
            itemStyle:{
              normal:{label:{show:true}},
              emphasis:{label:{show:true}}
            },
            data:data3
          },
          {
            name: sm4,
            type: 'map',
            mapType: 'china',
            roam: true,
            itemStyle:{
              normal:{label:{show:true}},
              emphasis:{label:{show:true}}
            },
            data:data4
          }
        ]
      };
      
    this.myMap.setOption(this.option);
           
    this.myMap.on('click', (param) => {
        if(!isNaN(param.value)){
          let name = param.name;
          if(name=='上海'||name=='重庆'||name=='北京'||name=='天津'){
            name = name + '市';
          }else{
            name = name + "省";
          }
         
          location.href='#/page/monitor/single/'+name;

        }
      });

  })


  }

}
